<template>
  <div class="detail">
    <div class="header">
      <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="detail">
      <van-card
        v-for="order in orderDetail.orderLines"
        :key="order.id"
        :num="order.number"
        :price="order.price + '.00'"
        :desc="order.product.description"
        :title="order.product.name"
        :thumb="order.product.photo"
        style="
          box-shadow: 1px 1px 1px 1px rgba(143, 66, 255, 0.4);
          margin: 10px 10px;
          border-radius: 5px;
        "
      />
    </div>
    <div class="money">
      <p style="text-align: right">
        总计：
        <span style="color: red">¥{{ orderDetail.total }}.00</span>
      </p>
    </div>
    <div class="address" style="margin-bottom: 50px">
      <p>
        服务地址：{{ orderDetail.address.province }}{{ orderDetail.address.city
        }}{{ orderDetail.address.area }}{{ orderDetail.address.address }}
      </p>
      <p>
        联系方式：{{ orderDetail.customer.realname }}({{
          orderDetail.address.telephone
        }})
      </p>
      <p>下单时间：{{ orderDetail.serviceTime | dateFormat }}</p>
      <p>服务时间：{{ orderDetail.orderTime | dateFormat }}</p>
      <p class="status">{{ orderDetail.status }}</p>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      //获取订单id
      orderId: this.$route.query.id,
    };
  },
  computed: {
    // 获取订单详情数据
    ...mapState("orderdetail", ["orderDetail"]),
  },
  methods: {
    // 引用获取订单详情的方法
    ...mapActions("orderdetail", ["getOrderDetail"]),

    //获取对应订单id的详情
    queryOrderDetail(id) {
      let data = {
        id: id,
      };
      this.getOrderDetail(data);
    },
    //返回按钮
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
      //获取对应订单id的详情
      this.queryOrderDetail(this.orderId);
  },
};
</script>

<style scoped>
.address {
  background-color: #f8f8f8;
  padding: 3px 5px;
}
.address p {
  height: 12px;
  margin-bottom: 0.5em;
  font-size: 12px;
  color: #999;
}
.address .status {
  text-align: right;
}
</style>